<template>
  <div class="togetherReading">
    <van-notice-bar
      :text="rule"
      left-icon="volume-o"
    />
    <van-tabs v-model="active" color="#FDC12C" title-active-color="#FDC12C"	:line-height="height" @click="tabChange(active)">
      <van-tab v-for="(item,index) in tabs" :key="index" :title="item.cate_name" ></van-tab>
    </van-tabs>
    <div class="line"></div>
    <div class="contentMain">
      <div class="li" v-for="(item,index) in content" :key="index" @click="goDetail(item.article_id)">
        <div class="left">
          <div class="name">{{item.title}}</div>
          <div><span>{{item.create_time}}</span><span>{{item.pv}}</span></div>
        </div>
        <div class="right">
          <img :src="item.img_url" alt="">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/8 0008 16:04.
     */
    import { Indicator } from 'mint-ui';
    import utils from '../../../lib/StringExtend'
    export default {
        mounted() {
          if(utils.isNone(utils.getCookie('wechat_id_'+this.wechatId)) || utils.isNone(utils.getCookie('open_id_'+this.wechatId))) {
            this.getWechat();
          }
          if(!utils.isNone(this.code)&&!utils.isNone(this.appid)) {
            this.userInfo();
          }else {
            this.loadData();
          }
        },
        components: {},
        props: {},
        data() {
            return {
              active:0,
              height:1,
              tabs:[{cate_name:'全部',article_id:''}],
              rule:'',//规则
              content:[],
              appid: utils.GetQueryString('appid'),
              code: utils.GetQueryString('code'),
              wechatId:utils.getCookie('wechat_id'),
              wechat_id:this.$route.query.wechat_id,//公众号
            }
        },
        computed: {},
        methods: {
          //微信授权
          getWechat(){
            if(utils.isNone(this.wechat_id)){
              return;
            }
            let params = {
              redirect_url: window.location.href,
              wechat_id: this.wechat_id
            };
            utils.setCookie('wechat_id', this.$route.query.wechat_id);
            utils.setCookie('wechat_id_'+this.wechat_id, this.wechat_id);
            this.$axios.wechatWechatOauth(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              let url = res.data.url;
              window.location.href = url;
            })
          },
          //获取用户信息
          userInfo(){
            let params = {
              appid: this.appid,
              code: this.code,
            };
            this.$axios.wechatGetWechatUser(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              utils.setCookie('open_id_'+this.wechatId, res.data[0].open_id);
              this.loadData();
            })
          },
          goDetail(id){
            this.$router.push({path:'/togetherReadingDetals',query:{id:id}});
          },
          tabChange(e){
            this.loadList(this.tabs[e].art_cate_id)
          },
          //分类
          loadData(){
            let params = {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.articleGetArticlecate(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg);
                return;
              }
              this.tabs = this.tabs.concat(res.data.list);
              this.rule = res.data.read_rule;
              this.loadList(this.tabs[0].art_cate_id);
            })
          },
          //列表
          loadList(id){
            Indicator.open('加载中...');
            let params = {
              art_cate_id:id,
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.articleGetArticlelist(params).then(res=>{
              Indicator.close();
              if(res.errcode !== '000'){
                this.$toast(res.errmsg);
                return;
              }
              this.content = res.data;
            })
          }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
  .togetherReading{
    background: white;
    .line{
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }
    .contentMain{
      padding: 0 0.3rem;
      .li{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #EFEFEF;
        padding: 0.2rem 0;
        .left{
          width: 4rem;
          font-size: 0.3rem;
          color: #333333;
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            -webkit-line-clamp: 2;
          }
          span{
            font-size: 0.22rem;
            color: #CECFD3;
            margin-right: 0.6rem;
          }
        }
        .right{
          width: 2.1rem;
          height: 1.4rem;
          border-radius: 0.06rem;
          overflow: hidden;
          img{
            height: 100%;
            width: 100%;
            border-radius: 0.06rem;
          }
        }
      }
    }
  }

</style>
